<template>
  <div class="resume">
    <section class="resume-header">
      <div class="profile">
        <img src="https://picsum.photos/seed/profile/200/200" alt="个人头像" class="profile-image">
        <div class="profile-info">
          <h1>张艺创</h1>
          <p class="title">视觉设计师 & 摄影师</p>
          <p class="location">上海，中国</p>
        </div>
      </div>
    </section>
    
    <section class="resume-content">
      <div class="resume-section">
        <h2>个人简介</h2>
        <p>我是一名热爱创作的视觉设计师和摄影师，拥有超过5年的行业经验。专注于通过视觉语言传达情感和讲述故事，擅长商业摄影、人像摄影和品牌设计。我的作品曾在多个展览中展出，并获得业界认可。</p>
      </div>
      
      <div class="resume-section">
        <h2>工作经验</h2>
        <div class="experience-item" v-for="job in experience" :key="job.id">
          <h3 v-text="job.title"></h3>
          <p class="company"><span v-text="job.company"></span> | <span v-text="job.period"></span></p>
          <p v-text="job.description"></p>
        </div>
      </div>
      
      <div class="resume-section">
        <h2>教育背景</h2>
        <div class="education-item" v-for="edu in education" :key="edu.id">
          <h3 v-text="edu.degree"></h3>
          <p class="school"><span v-text="edu.school"></span> | <span v-text="edu.period"></span></p>
          <p v-text="edu.description"></p>
        </div>
      </div>
      
      <div class="resume-section">
        <h2>技能专长</h2>
        <div class="skills">
          <div class="skill-category" v-for="category in skills" :key="category.name">
            <h3 v-text="category.name"></h3>
            <ul>
              <li v-for="skill in category.items" :key="skill" v-text="skill"></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const experience = ref([
  {
    id: 1,
    title: '高级视觉设计师',
    company: '创意视觉工作室',
    period: '2020年6月 - 至今',
    description: '负责品牌视觉设计、广告创意和摄影项目。主导了多个知名品牌的设计项目，提升了客户的品牌形象和市场影响力。'
  },
  {
    id: 2,
    title: '摄影师',
    company: '光影摄影机构',
    period: '2018年3月 - 2020年5月',
    description: '专注于商业摄影和人像摄影，为客户提供高质量的视觉内容。作品被多家媒体采用，并参与了多个摄影展览。'
  },
  {
    id: 3,
    title: '平面设计师',
    company: '设计之道公司',
    period: '2016年7月 - 2018年2月',
    description: '负责品牌设计、包装设计和平面广告设计。参与了多个大型项目，积累了丰富的设计经验。'
  }
])

const education = ref([
  {
    id: 1,
    degree: '视觉传达设计硕士',
    school: '上海视觉艺术学院',
    period: '2014年9月 - 2016年6月',
    description: '专注于品牌设计和视觉传达理论研究，毕业作品获得优秀毕业设计奖。'
  },
  {
    id: 2,
    degree: '摄影学士',
    school: '北京电影学院',
    period: '2010年9月 - 2014年6月',
    description: '系统学习了摄影理论和技术，掌握了多种摄影风格和后期处理技巧。'
  }
])

const skills = ref([
  {
    name: '设计技能',
    items: ['品牌设计', '平面设计', 'UI/UX设计', '排版设计']
  },
  {
    name: '摄影技能',
    items: ['商业摄影', '人像摄影', '风景摄影', '产品摄影']
  },
  {
    name: '软件技能',
    items: ['Adobe Photoshop', 'Adobe Illustrator', 'Adobe InDesign', 'Lightroom']
  }
])
</script>

<style scoped>
.resume {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.resume-header {
  background: linear-gradient(135deg, #42b983, #359c6d);
  padding: 50px;
  border-radius: 12px;
  margin-bottom: 40px;
  color: white;
  box-shadow: 0 10px 30px rgba(66, 185, 131, 0.2);
}

.profile {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .profile {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

.profile-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.profile-info h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  opacity: 0.95;
  font-weight: 500;
}

.location {
  font-size: 1.2rem;
  opacity: 0.9;
}

.resume-section {
  margin-bottom: 50px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.resume-section h2 {
  font-size: 2.2rem;
  margin-bottom: 25px;
  color: #333;
  padding-bottom: 15px;
  border-bottom: 3px solid #42b983;
}

.resume-section p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
}

.experience-item,
.education-item {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.experience-item:last-child,
.education-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.experience-item h3,
.education-item h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: #333;
}

.company,
.school {
  font-size: 1.2rem;
  color: #42b983;
  margin-bottom: 15px;
  font-weight: 500;
}

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.skill-category h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.skill-category ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-category li {
  background-color: #f1f1f1;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.95rem;
}
</style>